<template>
  <div class="login">
    <div class="loginDiv">
      <el-form ref="form" v-loading="formLoadIng" :model="form" :rules="rules" class="login-form login-form-reset">
        <div class="logo" />
        <h3 class="title">{{ $t('J博士投资管理系统') }}</h3>
        <el-divider><i class="el-icon-key" /></el-divider>
        <el-form-item prop="userName">
          <el-input v-model="form.userName" size="mini" clearable auto-complete="new-password" :placeholder="$t('登录名')" />
        </el-form-item>
        <el-form-item v-if="tenant === 'true'" prop="tenantCode">
          <el-input v-model="form.tenantCode" size="mini" auto-complete="new-password" clearable :placeholder="$t('机构编号')" />
        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model="form.code" size="mini" clearable auto-complete="new-password" :placeholder="$t('验证码')">
            <template slot="append">
              <div v-if="!repeatClick" style="padding: 0 10px;">
                <el-button v-if="btnShow" type="text" :disabled="disabled && tenant === 'true'" @click="getCode">{{ $t('获取验证码') }}</el-button>
                <span v-else>{{ num }}</span>
              </div>
              <div v-else style="padding: 0 10px;">
                <el-button type="text" disabled icon="el-icon-loading">{{ $t('正在获取') }}</el-button>
              </div>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="newPassword">
          <el-input v-model="form.newPassword" type="password" size="mini" clearable auto-complete="new-password" :placeholder="$t('新密码')" show-password />
        </el-form-item>
        <el-form-item prop="confirmPassword">
          <el-input v-model="form.confirmPassword" type="password" size="mini" clearable auto-complete="new-password" :placeholder="$t('确认密码')" show-password @keyup.enter.native="submit" />
        </el-form-item>
        <el-form-item style="width:100%;">
          <el-button
            size="small"
            type="primary"
            style="width:100%;margin-top: 5px;"
            @click.native.prevent="submit"
          >
            <span>{{ $t('重设密码') }}</span>
          </el-button>
        </el-form-item>
        <a class="recoverpw link_a" style="font-size: 14px;" @click="toLogin">{{ $t('返回登录') }}</a>
      </el-form>
    </div>

    <!--  底部  -->
    <div class="el-login-footer">
      <span>Copyright © 2016-2025 {{ $t('北京安信立融科技股份有限公司') }} - Powered By {{ $t('J博士') }}V4.0</span>
    </div>
  </div>
</template>

<script>
import { getTenant, sendCode, updatePsw } from '@/api/login'
export default {
  name: 'Recoverpw',
  components: {
  },
  data() {
    const password = (rule, value, callback) => {
      var passwordreg = /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,16}/
      if (!passwordreg.test(value)) {
        callback(new Error(this.$t('密码必须由数字、字母、特殊字符组合,请输入6-16位')))
      } else {
        callback()
      }
    }
    const equalToPassword = (rule, value, callback) => {
      if (this.form.newPassword !== value) {
        callback(new Error(this.$t('两次输入的密码不一致')))
      } else {
        callback()
      }
    }
    return {
      formLoadIng: false,
      btnShow: true,
      num: 30,
      repeatClick: false,
      // 是否多租户模式
      tenant: 'false',
      form: {
        userName: '',
        tenantCode: '',
        code: '',
        newPassword: '',
        confirmPassword: ''
      },
      // 表单校验
      rules: {
        userName: [
          { required: true, message: this.$t('必填信息'), trigger: 'blur' }
        ],
        tenantCode: [
          { required: true, message: this.$t('必填信息'), trigger: 'blur' }
        ],
        code: [
          { required: true, message: this.$t('必填信息'), trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: this.$t('必填信息'), trigger: 'blur' },
          { type: 'string', message: this.$t('请输入不包含空格的字符'), trigger: 'blur',
            transform(value) {
              if (value && value.indexOf(' ') === -1) {
                return value
              } else {
                return false
              }
            }
          },
          { required: true, validator: password, trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: this.$t('必填信息'), trigger: 'blur' },
          { required: true, validator: equalToPassword, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    disabled() {
      if (this.form.userName && this.form.tenantCode) {
        return false
      } else {
        return true
      }
    }
  },
  mounted() {
    // 查询是否多租户
    this.getTenant()
    this.reset()
  },
  methods: {
    toLogin() {
      this.$router.push({ path: '/login' })
    },
    /**
     * 获取是不是多租户模式
     */
    getTenant() {
      this.formLoadIng = true
      getTenant().then(res => {
        if (res !== undefined) {
          this.tenant = res.data
          this.formLoadIng = false
        }
      })
    },
    getCode() {
      this.repeatClick = true
      this.form.code = ''
      sendCode(this.form.userName, this.form.tenantCode).then(res => {
        if (res.code === 200) {
          this.repeatClick = false
          this.btnShow = false
          var timeClock = setInterval(() => {
            this.num--
            if (this.num === 0) {
              this.btnShow = true
              clearInterval(timeClock)
              this.num = 30
            }
          }, 1000)
        } else {
          this.msgError(res.msg)
        }
      }).catch(() => {
        this.repeatClick = false
        this.form.tenantCode = ''
      })
    },
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.formLoadIng = true
          updatePsw(this.form.userName, this.form.tenantCode, this.form.code, this.form.newPassword).then(response => {
            if (response.code === 200) {
              this.msgSuccess(this.$t('修改成功'))
              this.formLoadIng = false
              this.reset()
              setTimeout(() => {
                this.toLogin()
              }, 1500)
            } else {
              this.formLoadIng = false
              this.msgError(response.msg)
            }
          }).catch(() => {
            this.formLoadIng = false
          })
        }
      })
    },
    reset() {
      this.form = {
        userName: undefined,
        tenantCode: undefined,
        code: undefined,
        newPassword: undefined,
        confirmPassword: undefined
      }
    }
  }
}
</script>
